<@override name="contest_content">
<#if adminUser??>
  <a href="/contest/build/${cid!}" class="btn btn-info">Rebuild Board</a>
  <#if contest.type==2 || contest.type==3 || contest.type==4>
    <a href="#" id="info" class="btn btn-info" data-toggle="modal" data-target="#infoModal">Reslover</a>
  </#if>
</#if>
<div class="pagination pagination-centered">
  <#include "../common/_paginate2.html" />
  <@paginate2 currentPage=contestRank.pageNumber totalPage=contestRank.totalPage actionUrl="contest/rank/${cid!}" />
  <#if isLocked==true>
  <div class="pull-left">
    <span class="label label-important">Board Locked</span>
  </div>
  </#if>
  <div class="pull-right">
    <span class="badge badge-info">${contestRank.pageNumber}/${contestRank.totalPage} Pages</span>
    <span class="badge badge-info">${contestRank.totalRow} Users</span>
  </div>
</div>

<table id="contest-rank" class="table table-condensed table-bordered">
  <thead>
  <tr>
    <th width="5%">Rank</th>
    <th width="10%">User</th>
    <th width="15%">Nick Name</th>
    <th width="5%">Solved</th>
    <th width="10%">Penalty</th>
    <#list contestProblems as Problem>
      <th>
        <a href="contest/problem/${cid!}-${Problem.id}" data-toggle="tooltip"
           title="${Problem.title}"><strong>${Problem.id}</strong></a><br>
        <a href="contest/status/${cid!}?pid=${Problem.id}&result=0">${Problem.accepted}</a> /
        <a href="contest/status/${cid!}?pid=${Problem.id}">${Problem.submission}</a>
      </th>
    </#list>
  </tr>
  </thead>
  <tbody>
    <#if contestRank??>
      <#list contestRank.list as User>
      <tr>
        <td>
        <#if cstatus==2 && User.rank?is_number && User.rank<4>
          <#--<img class="medal" src="assets/images/medal_<#if User.rank==1>gold<#elseif User.rank==2>silver<#else>bronze</#if>.png">-->
        </#if>
        ${User.rank}
        </td>
        <td><a href="user/profile/${User.name!}"<#if adminUser?? && User.realName??>data-toggle="tooltip"
               title="${(User.realName)!}"</#if> target="_blank">${User.name!}</a></td>
        <td class="user">${User.nick!}</td>
        <td><a href="contest/status/${cid!}?name=${User.name!}&result=0">${User.solved!}</a></td>
        <td data="${User.penalty!}" class="penalty"><span>${(User.penalty/60)?int!}</span></td>
        <#list contestProblems as Problem>
          <#assign acSec=User["${Problem.id}_SolvedTime"]>
          <#assign ac=(User["${Problem.id}_SolvedTime"]/60)?int>
          <#assign wa=User["${Problem.id}_WrongNum"]>
          <#assign class="">
          <#if acSec==0 && wa!=0><#assign class="wa wa${(wa/5)?int}"></#if>
          <#if acSec!=0 && wa==0><#assign class="ac"></#if>
          <#if acSec!=0 && wa!=0><#assign class="ac ac1"></#if>
          <#if acSec!=0 && Problem.firstBloodUid == User.uid><#assign class="${class} fb"></#if>
          <td data="${User["${Problem.id}_SolvedTime"]}" class="${class}"><#if (acSec>0)><span>${ac}</span><#if (wa>0)>
            <br></#if></#if><#if (wa>0)>(-${wa})</#if>
          </td>
        </#list>
      </tr>
      </#list>
    </#if>
  </tbody>
</table>

<div class="pagination pagination-centered" id="contest-pagination">
  <#include "../common/_paginate2.html" />
  <@paginate2 currentPage=contestRank.pageNumber totalPage=contestRank.totalPage actionUrl="contest/rank/${cid!}" />
</div>

<div class="modal hide fade infoModal" id="infoModal">
  <form class="form-horizontal" action="contest/info/${cid!}" id="signupForm" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">x</button>
      <h3 id="signupModalLabel">
        Download Resolver XML File
      </h3>
    </div>
    <div class="modal-body">
      <div class="control-group">
        <label class="control-label" for="inputGrand"> Grand Medal </label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="fa fa-trophy"></i> </span>
            <input type="number" id="inputGrand" name="grand" placeholder="Grand Medal" required value="1">
          </div>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputFirst"> First Medal </label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="fa fa-trophy"></i> </span>
            <input type="number" id="inputFirst" name="first" placeholder="First Medal" required value="2">
          </div>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputSecond"> Second Medal </label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="fa fa-trophy"></i> </span>
            <input type="number" id="inputSecond" name="second" placeholder="Second Medal" required value="5">
          </div>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputThird"> Third Medal </label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="fa fa-trophy"></i> </span>
            <input type="number" id="inputThird" name="third" placeholder="Third Medal" required value="10">
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <span id="infoMsg"></span>
      <button type="submit" class="btn btn-primary">Download</button>
      <button class="btn" data-dismiss="modal">Cancel</button>
    </div>
  </form>
</div>

</@override>

<@override name="styles">
<style>
  img.medal {
    height: 24px;
    width: 24px;
  }
</style>
</@override>

<@override name="scripts">
<link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    document.onkeydown = nextpage;
    var prevpage = "/contest/rank/${cid!}-${contestRank.pageNumber-1}<#if contestRank.pageSize!=pageSize>?s=${contestRank.pageSize}</#if>"
    var nextpage = "/contest/rank/${cid!}-${contestRank.pageNumber+1}<#if contestRank.pageSize!=pageSize>?s=${contestRank.pageSize}</#if>"

    function nextpage(event) {
      event = event ? event : (window.event ? window.event : null);
        <#if (contestRank.pageNumber>1)>if (event.keyCode == 37)location = prevpage;</#if>
        <#if contestRank.pageNumber<contestRank.totalPage>if (event.keyCode == 39)location = nextpage;</#if>
    }

    function secondToDate(second) {
      var time = '';
      var hours = parseInt(second / 3600);
      time += (hours < 10 ? '0' : '') + hours + ':';
      second %= 3600;
      time += new Date(second * 1000).format("mm:ss")
      return time;
    }

    $('.ac, .penalty').mouseover(function () {
      var data = secondToDate($(this).attr('data'));
      $(this).children('span').html(data);
    });
    $('.ac, .penalty').mouseleave(function () {
      var data = parseInt($(this).attr('data') / 60);
      $(this).children('span').html(data);
    });

    <#if oj_style != "slate">
      $("#contest-rank").tablecloth({
        theme: "stats",
        condensed: true,
        striped: true,
        clean: true
      });
    </#if>
  });
</script>

  <#if adminUser??>
  <link type='text/css' rel='stylesheet' href='assets/pnotify/jquery.pnotify.default.css'/>
  <script src='assets/pnotify/jquery.pnotify.min.js' type='text/javascript'></script>
  <script type="text/javascript">
    /*var ws = null;
    function startServer() {
      if(ws != null)
          return;
        var url = null;
       if (window.location.protocol == 'http:') {
              url = '${baseUrl}'.replace('http', 'ws') + '/contest/rank.ws?' + ${cid};
          } else {
              url = '${baseUrl}'.replace('http', 'wss') + '/contest/rank.ws?' + ${cid};
          }
      if ('WebSocket' in window) {
        ws = new WebSocket(url);
      } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(url);
      } else {
        alert("Error: WebSocket is not supported by this browser.");
        return;
      }

      ws.onopen = function() {
        $.pnotify({
                    title: 'Connect Success',
                    text: 'websocket open! Welcome!',
                    history: false,
                    type: 'success'
                    });
      };
      ws.onmessage = function(event) {
        $.pnotify({
                    title: 'Receive Message',
                    text: event.data,
                    history: false,
                    type: 'info',
                    hide: false
                    });
      };
      ws.onclose = function() {
        
      };
    }

    startServer();*/
  </script>
  </#if>
</@override>
<@extends name="_layout.html" />
